<template>
  <div>
    <Breadcrumb :items="['系统管理', '客户端管理']" />
    <a-card class="general-card" title="客户端管理">
      <template #extra>
        <a-space direction="horizontal" :size="18">
          <a-button type="primary" :loading="loading" @click="refresh">
            <template #icon>
              <icon-refresh />
            </template>
            刷新
          </a-button>
        </a-space>
      </template>
      <!--分割线-->
      <a-divider direction="horizontal" />
      <a-row style="margin-bottom: 16px">
        <a-col :span="16">
          <a-space>
            <a-button type="primary" @click="openBoard(null, Operation.CREATE)">
              <template #icon>
                <icon-plus />
              </template>
              添加
            </a-button>
          </a-space>
        </a-col>
        <a-col :span="8" style="text-align: right">
          <a-space>
            <table-column-setting v-model:columns="columns" />
          </a-space>
        </a-col>
      </a-row>

      <a-table
        :columns="columns"
        :data="records"
        :loading="loading"
        row-key="id"
        :pagination="false">
        <template #number="{ record, rowIndex }">
          {{ rowIndex + 1 }}
        </template>
        <template #autoapprove="{ record }">
          <a-switch
            v-model="record.autoapprove"
            type="round"
            unchecked-color="#F53F3F"
            checked-value="true"
            unchecked-value="false"
            :disabled="true"
          >
            <template #checked>
              是
            </template>
            <template #unchecked>
              否
            </template>
          </a-switch>
        </template>
        <template #authorizedGrantTypes="{ record }">
          <a-space>
            <a-tag v-for="type in record.authorizedGrantTypes.split(',')" :key="type">
              {{ type }}
            </a-tag>
          </a-space>
        </template>
        <template #operation="{ record }">
          <a-button type="text" size="small" @click="openBoard(record.clientId, Operation.PREVIEW)">
            查看
          </a-button>
          <a-button type="text" size="small" @click="openBoard(record.clientId, Operation.UPDATE)">
            修改
          </a-button>
          <a-popconfirm :content="`确定删除 '${record.clientId}' 吗?`" type="warning" @ok="doRemove(record.clientId)">
            <a-button type="text" size="small" status="danger">
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-card>

    <client-board ref="board" @ok="refresh"/>
  </div>
</template>

<script>
import useLoading from "@/hooks/loading";
import { deleteById, findList } from "@/api/modules/system/client";
import ClientBoard from "@/views/system/client/components/client-board.vue";
import {Operation} from "@/types/global";

const columns = [{
  title: '#',
  align: 'right',
  fixed: 'left',
  width: 50,
  slotName: 'number'
}, {
  title: '客户端ID',
  dataIndex: 'clientId'
}, {
  title: '秘钥',
  dataIndex: 'clientSecret'
}, {
  title: '域',
  dataIndex: 'scope',
  width: 50
}, {
  title: '自动放行',
  dataIndex: 'autoapprove',
  slotName: 'autoapprove'
}, {
  title: '授权模式',
  dataIndex: 'authorizedGrantTypes',
  slotName: 'authorizedGrantTypes'
}, {
  title: '令牌时效',
  dataIndex: 'accessTokenValidity',
  align: 'right'
}, {
  title: '刷新时效',
  dataIndex: 'refreshTokenValidity',
  align: 'right'
}, {
  title: "操作",
  align: "right",
  fixed: "right",
  dataIndex: 'operation',
  slotName: 'operation'
}]
const { loading, setLoading } = useLoading();

export default {
  name: "Client",
  components: {ClientBoard},
  data() {
      return {
        columns,
        loading,
        records: [],
        Operation
      }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    async refresh() {
      setLoading(true)
      try {
        const { data } = await findList()
        this.records = data
      } finally {
        setLoading(false)
      }
    },
    async openBoard(id, type) {
      setLoading(true)
      try {
        await this.$refs.board.open(id, type)
      } finally {
        setLoading(false)
      }
    },
    async doRemove(id) {
      try {
        setLoading(true)
        await deleteById(id)
        await this.refresh()
      } finally {
        setLoading(false)
      }
    }
  }
};
</script>

<style scoped>

</style>
